import { Drawer, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import type { TabsProps } from 'antd';
import ShopForm from './form';

interface Props {
  isOpen: boolean,
  closeEvent: (isOpen: boolean) => void;
  id?: number,
  onSubmit: () => void;
  initImgUrl: string;
}

const UpdateModal: React.FC<Props> = (props) => {
  const { isOpen, closeEvent, id, onSubmit, initImgUrl } = props;
  const [open, setOpen] = useState(isOpen);
  const items: TabsProps['items'] = [
    {
      key: '4',
      label: '基本信息',
      children: <ShopForm initImgUrl={initImgUrl} submitData={onSubmit} id={id} />,
    }
  ];

  const onClose = () => {
    setOpen(false);
    closeEvent(false)
  };

  useEffect(() => {
    setOpen(isOpen);
  }, [isOpen, id]);

  const onChange = (key: string) => {
    console.log(key);
  };

  return (
    <Drawer
      title={`门店信息`}
      width={
        '80%'}
      onClose={onClose}
      open={open}
      closeIcon={false}
      placement='right'
    >
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </Drawer>
  );
}

export default UpdateModal;
